<template>
  <el-container>
    <el-main v-loading="loading">
      <!-- 报表 -->
      <el-row :gutter="4">
        <el-col :span="24" :sm="24" :lg="12" class="echarts-item">
          <div class="content-title">实时调度折线图</div>
          <ve-histogram :data="hChartData"></ve-histogram>
        </el-col>
        <el-col :span="24" :sm="24" :lg="12" class="echarts-item">
          <div class="content-title">本周调度柱状图</div>
          <ve-line :data="lChartData"></ve-line>
        </el-col>
        <el-col :span="24" :sm="24" :lg="12" class="echarts-item">
          <div class="content-title">本月调度条形图</div>
          <ve-bar :data="bChartData"></ve-bar>
        </el-col>
        <el-col :span="24" :sm="24" :lg="12" class="echarts-item">
          <div class="content-title">本年调度瀑布图</div>
          <ve-waterfall :data="wChartData"></ve-waterfall>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { Monitor } from "@/api";

export default {
  data() {
    return {
      /* 实体数据 */
      hChartData: { columns: [], rows: [] }, //实时调度折线图
      lChartData: { columns: [], rows: [] }, //本周调度折线图
      bChartData: { columns: [], rows: [] }, //本月调度折线图
      wChartData: { columns: [], rows: [] }, //本年调度折线图

      loading: false //加载中
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.loading = true;

      /* 初始化数据源 */
      let promiseArr = [];

      //获取实时调度数据
      promiseArr.push(
        Monitor.GetApiByDay().then(res => {
          this.hChartData = res;
        })
      );
      //获取本周调度数据
      promiseArr.push(
        Monitor.GetApiByWeek().then(res => {
          this.lChartData = res;
        })
      );
      //获取本月调度数据
      promiseArr.push(
        Monitor.GetApiByMonth().then(res => {
          this.bChartData = res;
        })
      );
      //获取本年调度数据
      promiseArr.push(
        Monitor.GetApiByYear().then(res => {
          this.wChartData = res;
        })
      );

      Promise.all(promiseArr).then(() => {
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.echarts-item {
  padding: "16px";
  text-align: center;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  padding: 10px 10px;
  font-size: 22px;
  color: #1f2f3d;
}
</style>